<template>
    <div>
        <Form :option="formOptions" @model="modelValue"></Form>
        <ElButton type="primary" @click="insert">添加</ElButton>
    </div>

    <Table :data="data" :options="options" @curronRow="selRow"></Table>
    <ElPagination v-model:current-page="currentPage3" v-model:page-size="pageSize3" :size="size" :disabled="disabled"
        :background="background" layout="prev, pager, next, jumper" :total="1000" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />

    <!-- <bj></bj> -->
</template>
<script setup lang="jsx">
import Table from "./components/Table/index.vue"
import Form from "./components/Form/index.vue"
import bj from "./bj.vue"
import { ElPagination } from "element-plus";
import { ElButton } from "element-plus";
import { ref, reactive } from "vue";
const options = [
    {
        field: 'selection'
    },
    {
        label: "序号",
        field: 'index',
        width: '100px'
    },
    {
        label: "名字",
        field: "name"
    }, {
        label: "年龄",
        field: "age"
    },
    {
        label: "操作",
        field: "action",
        slots: () => {
            return `
                <ElButton type="text" onClick={test}>查看</ElButton>
                <ElButton type="text">修改</ElButton>
           `
        }
    }
]

const data = reactive([
    { name: "张三", age: 18 },
    { name: "李四", age: 18 },
    { name: "王五", age: 18 },
    { name: "赵六", age: 18 }
])

function selRow(row) {
    console.log(row, 42)
}
function test() {
    console.log(123)
}

const formOptions = ref([
    {
        field: "name",
        label: "姓名",
        component: "Input",
        span: 6

    }, {
        field: "age",
        label: "年龄",
        component: "Select",
        componentProps: {
            options: [{ label: "18", value: 1 }, { label: "19", value: 2 }, { label: "20", value: 3 }, { label: "21", value: 4 }, { label: "22", value: 5 }, { label: "23", value: 6 }, { label: "24", value: 7 }, { label: "25", value: 8 }, { label: "26", value: 9 }]
        },
        span: 6
    }, {
        field: "sex",
        label: "性别",
        component: "Autocomplete",
        componentProps: {
            searchApi: () => {
                return [
                    { label: "男", value: "男" }, { label: "女", value: "女" }
                ]
            }
        },
        span: 6
    },
    {
        field: "city",
        label: "居住地",
        component: "cascader",
        componentProps: {
            options: [
                {
                    value: '四川',
                    label: '四川',
                    children: [{
                        value: '泸州',
                        label: '泸州'
                    }, {
                        value: '绵阳',
                        label: '绵阳'
                    }
                    ]
                }, {
                    value: "云南",
                    label: "云南",
                    children: [{
                        value: "昆明",
                        label: "昆明"
                    }, {
                        value: "丽江",
                        label: "丽江"
                    }]

                },
                {
                    value: "贵州",
                    label: "贵州",
                    children: [{
                        value: "贵阳",
                        label: "贵阳"
                    }, {
                        value: "遵义",
                        label: "遵义"
                    }]
                }
            ]
        },
        span: 6
    }
])
const formParams = ref({})
function modelValue(val) {
    // console.log(val,63)
    formParams.value = val
}

function insert() {
    console.log("添加")
    console.log(formParams.value, 74)
    data.push(formParams.value)
}
</script>